<%@ include file="../common/IncludeTop.jsp"%>

<style>
	.okTips{
		color: green;
	}
	.errorTips{
		color: red;
	}
</style>

<script>
	// var xhr;
	// function checkUsername() {
	// 	var username = document.getElementById("username").value;
	// 	//alert(username);
	// 	xhr = new XMLHttpRequest();
	// 	//发送请求
	// 	xhr.onreadystatechange = fun1;
	// 	xhr.open("get","usernameExist?username="+username,true);
	// 	xhr.send(null);
	// }
	//
	// function fun1() {
	// 	if(xhr.readyState === 4){
	// 		if (xhr.status === 200){
	// 			var tips = document.getElementById("usernameTips");
	// 			var responseInfo = xhr.responseText;
	// 			// alert(responseInfo);
	// 			// console.log(responseInfo);
	// 			if (responseInfo === "Exist"){
	// 				tips.className = "errorTips";
	// 				tips.innerText = "Invalid";
	// 			} else if(responseInfo === "Not Exist"){
	// 				tips.className = "okTips";
	// 				tips.innerText = "Available";
	// 			}
	// 		}
	// 	}
	// }
	$(function () {
		$('#username').on('blur',function () {
			$.ajax(
					{
						type         : "GET",
						url          : "usernameExist?username="+this.value,
						success      : function (data) {
							//console.log(data);
							if (data.msg === "Exist"){
								$('#usernameTips').attr("class","errorTips").text('Invalid');
							} else if (data.msg === "Not Exist"){
								$('#usernameTips').attr("class","okTips").text('Available');
							}
						}
					}
			);
		});
	});
	var xhr = new XMLHttpRequest();
	function checkPassword() {
		var psw1 = document.getElementById('psw1').value;
		var psw2 = document.getElementById('psw2').value;
		var msg = document.getElementById('isCorrectInfo');
		if(psw1==psw2){
			msg.classList.add('okmsg');
			msg.innerText = 'correct';
			// msg.attr("class","okTips").text('Available');
		}
		else {
			msg.classList.add('errormsg');
			msg.innerText = 'The passwords are not same.';
			// msg.attr("class","errorTips").text('Invalid');
		}
	}
</script>

<div id="Catalog">
	<div>
		<form action="newAccount" method="post">
			<h3>User Information</h3>

			<div>
				<table>
					<tr>
						<td>
							<input class="input-sign" id="username" type="text" name="username" placeholder="Username"/>
							<span id="usernameTips"></span>
						</td>
					</tr>
					<tr>
						<td><input class="input-sign" id="psw1" type="text" name="password" placeholder="New password"/></td>
					</tr>
					<tr>
						<td>
							<input class="input-sign" id="psw2" type="text" name="repeatedPassword" onblur="checkPassword();" placeholder="Repeat password"/>
							<span id="isCorrectInfo"></span>
						</td>
					</tr>
					<%--			验证码--%>
					<tr>
						<td>
							<input class="input-sign" type="text" name="vCode" size="5" maxlength="4" placeholder="VerificationCode"/>
							<a href="newAccount"><img border="0" src="verificationCode" name="checkcode"></a>
						</td>
					</tr>
				</table>
			</div>
			<div id="box" onselectstart="return false;">
				<div class="bgColor"></div>
				<div class="txt" >Slide to Unlock</div>
				<!--给i标签添加上相应字体图标的类名即可-->
				<div class="slider"><i class="iconfont icon-double-right"></i></div>
			</div>
			<script>
				//一、定义了一个获取元素的方法
				function getEle(selector){
					return document.querySelector(selector);
				}
				//二、获取到需要用到的DOM元素
				var box = getEle("#box"),//容器
						bgColor = getEle(".bgColor"),//背景色
						txt = getEle(".txt"),//文本
						slider = getEle(".slider"),//滑块
						icon = getEle(".slider>i"),
						successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离
						downX,//用于存放鼠标按下时的位置
						isSuccess = false;//是否解锁成功的标志，默认不成功

				//三、给滑块添加鼠标按下事件
				slider.onmousedown = mousedownHandler;

				//3.1鼠标按下事件的方法实现
				function mousedownHandler(e){
					bgColor.style.transition = "";
					slider.style.transition = "";
					var e = e || window.event || e.which;
					downX = e.clientX;
					//在鼠标按下时，分别给鼠标添加移动和松开事件
					document.onmousemove = mousemoveHandler;
					document.onmouseup = mouseupHandler;
				};

				//四、定义一个获取鼠标当前需要移动多少距离的方法
				function getOffsetX(offset,min,max){
					if(offset < min){
						offset = min;
					}else if(offset > max){
						offset = max;
					}
					return offset;
				}

				//3.1.1鼠标移动事件的方法实现
				function mousemoveHandler(e){
					var e = e || window.event || e.which;
					var moveX = e.clientX;
					var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
					bgColor.style.width = offsetX + "px";
					slider.style.left = offsetX + "px";

					if(offsetX == successMoveDistance){
						success();
					}
					//如果不设置滑块滑动时会出现问题（目前还不知道为什么）
					e.preventDefault();
				};

				//3.1.2鼠标松开事件的方法实现
				function mouseupHandler(e){
					if(!isSuccess){
						bgColor.style.width = 0 + "px";
						slider.style.left = 0 + "px";
						bgColor.style.transition = "width 0.8s linear";
						slider.style.transition = "left 0.8s linear";
					}
					document.onmousemove = null;
					document.onmouseup = null;
				};

				//五、定义一个滑块解锁成功的方法
				function success(){
					isSuccess = true;
					txt.innerHTML = "Succeed to Unlock!";
					bgColor.style.backgroundColor ="lightgreen";
					slider.className = "slider active";
					icon.className = "iconfont icon-xuanzhong";
					//滑动成功时，移除鼠标按下事件和鼠标移动事件
					slider.onmousedown = null;
					document.onmousemove = null;
					var $sbmBtn = $("#sbmBtn");
					isSuccess ? $sbmBtn.removeAttr("disabled") : $sbmBtn.attr("disabled", "disabled");

				};

			</script>

			<%@ include file="IncludeAccountFields.jsp"%>
			<input type="submit" id="sbmBtn"  disabled="disabled" name="newAccount" value="Save Account Information" class="form-control" />
		</form>
	</div>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>